<template>
	<view class="content">
		<f-navbar title=" " fontColor="#303133" transparentTitleColor="#fff" bgColor="#fff" :scrollTop="scrollTop" navbarType='5'></f-navbar>
		<scroll-view scroll-y="true" class="main" @scroll="scroll">
			<view class="header_box" :style="'padding-top: '+$safeT+'px'">
				<!-- <image @click="back" class="back" :style="'margin-top: '+$safeT+'px'" src="../../static/pages_my/left_w.png" mode=""></image> -->
				<view class="text">
					<text class="val">{{price}}</text>
					<text class="label">账户余额(元)</text>
				</view>
			</view>
			<view class="body_box">
				<view class="title">
					<text>充值金额</text>
					<view class="r" @click="toDetailed">
						<text>金额明细</text>
						<image src="../../static/pages_my/right_b.png" mode=""></image>
					</view>
				</view>
				<view class="price_box">
					<view class="item" @click="choosemoney(i.id)" :class="{act:i.id==id}" v-for="(i,idx) in list" :key="idx">
						<text class="money">{{i.price}}元</text>
						<text class="song">送{{i.givenum}}元</text>
					</view>
					<u-empty mode="list" v-if=" list.length === 0" style="margin-top: 200rpx;" icon="/static/none.png">
							</u-empty>
				</view>
				<view class="pay_type">
					<!-- #ifdef APP -->
					
					<view class="item"  @click="paytype = 1">
						<view class="l">
							<image class="img" src="/static/index/wx.png" mode=""></image>
							<text>微信支付</text>
						</view>
						<image v-if="paytype == 1" class="selectImg" src="/static/selected.png" mode=""></image>
						<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
					</view>
					<view class="item" @click="paytype = 0">
						<view class="l">
							<image class="img" src="/static/index/zfb.png" mode=""></image>
							<text>支付宝支付</text>
						</view>
						<image v-if="paytype == 0" class="selectImg" src="/static/selected.png" mode=""></image>
						<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<view class="item"  @click="paytype = 2">
						<view class="l">
							<image class="img" src="/static/index/wx.png" mode=""></image>
							<text>微信支付</text>
						</view>
						<image v-if="paytype == 2" class="selectImg" src="/static/selected.png" mode=""></image>
						<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="item"  @click="paytype = 3">
						<view class="l">
							<image class="img" src="/static/index/wx.png" mode=""></image>
							<text>微信支付</text>
						</view>
						<image v-if="paytype == 3" class="selectImg" src="/static/selected.png" mode=""></image>
						<image v-else class="selectImg" src="/static/index/select.png" mode=""></image>
					</view>
					<!-- #endif -->
				</view>
				<view class="pay_type">
					
				</view>
			</view>
			
		</scroll-view>
		<view class="bottom_btn">
			<view class="btn" @click="confirm">立即充值</view>
		</view>
	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	export default {
		
		data() {
			return {
				paytype:0,
				price: '',
				id: '',
				list: [],
				safeT: '',
				scrollTop:0
			};
		},
		onLoad() {
			// #ifdef APP
			this.paytype = 1
			// #endif
			// #ifdef MP
			this.paytype = 2
			// #endif
			// #ifdef H5
			this.paytype = 3
			// #endif
			
			// #ifdef MP
			this.safeT = uni.getSystemInfoSync().statusBarHeight + 30;
			// #endif
			// #ifdef APP
			this.safeT = uni.getSystemInfoSync().statusBarHeight + 10;
			// #endif
			// #ifdef H5
			this.safeT = uni.getSystemInfoSync().statusBarHeight + 20;
			// #endif
			this.getInfo()
			this.getList()
		},
		
		methods:{
			scroll(e){
				console.log(e)
				this.scrollTop = e.detail.scrollTop;
			},
			getInfo(){
				this.$api.post('/index', {}).then(res => {
					if (res.code == 1) {
						this.price = res.data.money
					}
				}).catch((res) => {
				
				})
			},
			getList(){
				this.$api.post('/recharge', {}).then(res => {
					if (res.code == 1) {
						this.list = res.data
						this.id = res.data[0].id
					}
				}).catch((res) => {
				
				})
			},
			choosemoney(id){
				this.id = id
			},
			back(){
				uni.navigateBack()
			},
			confirm(){
				this.$api.post('/recharge',{
					paytype: this.paytype,
					id: this.id,
					type: 'recharge'
				}).then(res=>{
					let data = {
						pay: res.data,
						paytype: this.paytype,
					}
					this.$pay(data).then(()=>{
						this.getInfo()
					})
				})
			},
			toDetailed(){
				uni.navigateTo({
					url:'/pages_my/detailed/detailed'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #F7F7FA;
}
.content{
	height: 100vh;
	display: flex;
	flex-direction: column;
	.main{
		flex: 1;
		overflow: hidden;
	}
}
.bottom_btn{
	width: 750rpx;
	height: 190rpx;
	background: #FFFFFF;
	box-shadow: inset 0rpx 1rpx 0rpx 0rpx #EBEBEB;
	overflow: hidden;
	.btn{
		width: 686rpx;
		height: 96rpx;
		background: $uni-primary;
		border-radius: 48rpx;
		margin: 20rpx auto 0;
		text-align: center;
		line-height: 96rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
}
.header_box{
	width: 750rpx;
	height: 530rpx;
	box-sizing: border-box;
	background-color: $uni-primary;
	.back{
		width: 16rpx;
		height: 32rpx;
		margin: 115rpx 0 0 32rpx;
	}
	.text{
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
		margin-top: 58rpx;
		.label{
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 10rpx;
		}
		.val{
			font-size: 100rpx;
			font-weight: 900;
		}
	}
}
.body_box{
	padding: 50rpx 32rpx;
	box-sizing: border-box;
	border-radius: 30rpx 30rpx 0rpx 0rpx;
	width: 750rpx;
	position: absolute;
	top: 600rpx;
	background: #F7F7FA;
	.title{
		font-size: 32rpx;
		color: #1C274C;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.r{
			font-size: 24rpx;
			color: #1C274C;
			image{
				width: 8rpx;
				height: 15rpx;
				margin-left: 8rpx;
			}
		}
	}
	.price_box{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.item{
			margin-top: 40rpx;
			width: 200rpx;
			height: 138rpx;
			background: #FBFBFE;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			align-items: center;
			.money{
				width: 200rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				text-align: center;
				line-height: 72rpx;
				font-size: 30rpx;
				color: #1C274C;
				box-sizing: border-box;
			}
			.song{
				font-size: 24rpx;
				color: #ADB1BF;
				margin-top: 16rpx;
			}
		}
		.act{
			color: $uni-primary;
			border: 2rpx solid $uni-primary;
			.money{
				background: $uni-primary;
				color: #fff;
			}
		}
		.lastItem{
			.input-placeholder{
				font-size: 24rpx;
			}
			::v-deep .uni-input-input{
				font-size: 30rpx;
			}
			.money{
				display: flex;
				align-items: center;
			}
		}
	}
	.pay_type{
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 686rpx;
			height: 140rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 52rpx;
			box-sizing: border-box;
			margin: 30rpx auto 0;
			.l{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333333;
				.img{
					width: 42rpx;
					height: 38rpx;
					margin-right: 20rpx;
				}
			}
			.selectImg{
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
}

</style>
